<template>
    <div style="width: 100%;height: 80%;">
        <!-- <div class="flex gap-2">
			<el-tag type="success">成品明细</el-tag>
		</div> -->

        <el-table :data="state.dataList" stripe v-loading="state.loading" border style="width: 100%;height: 100%;"
            show-summary :header-cell-style="tableStyle.headerCellStyle" :cell-style="tableStyle.cellStyle">
            <el-table-column type="index" fixed="left" label="#" width="80" />
            <el-table-column :label="$t('as.cardCode')" fixed="left" prop="cardCode" width="150px" />
            <el-table-column width="150" prop="ckeckFlag" :label="$t('as.ckeckFlag')" >
				<template #default="scope">
                    <el-tag size="large" :type="scope.row.ckeckFlag === 'Y' ? 'success' : 'danger'">
                    {{ scope.row.ckeckFlag === 'Y' ? $t('edijob.yes') : $t('edijob.no')}}</el-tag>
				</template>
			</el-table-column>
            <el-table-column :label="$t('as.mesQty')" prop="mesQty" width="150px" >
                <template #default="scope">
                    <el-tag size="large" type="success">{{scope.row.mesQty}}</el-tag>
				</template>
            </el-table-column>
            <el-table-column :label="$t('as.k3Qty')" prop="k3Qty" width="150px" >
                <template #default="scope">
                    <el-tag size="large" type="info">{{scope.row.k3Qty}}</el-tag>
				</template> 
            </el-table-column>
            <el-table-column :label="$t('as.checkQty')" prop="checkQty " width="150px" >
                <template #default="scope">
                    <el-tag size="large" plain type="primary">{{scope.row.checkQty ?? 0}}</el-tag>
				</template>
            </el-table-column>
            <el-table-column :label="$t('as.checkTime')" prop="checkTime" width="250px" />
            <el-table-column :label="$t('as.checkUserName')" prop="checkUserName" width="250px" />
            <el-table-column :label="$t('as.cardSource')" prop="cardSource" width="150px" />
            <el-table-column :label="$t('as.assetClass')" prop="assetClass" width="170px" />
            <el-table-column :label="$t('as.assetName')" prop="assetName" width="250px" />
            <el-table-column :label="$t('as.unit')" prop="unit" width="150px" />
            <el-table-column :label="$t('as.startDate')" prop="startDate" width="250px" />
            <el-table-column :label="$t('as.assetCode')" prop="assetCode" width="150px" />
            <el-table-column :label="$t('as.barcode')" prop="barcode" width="150px" />
            <el-table-column :label="$t('as.specification')" prop="specification" width="150px" />
            <el-table-column :label="$t('as.assetLocation')" prop="assetLocation" width="150px" />
            <el-table-column :label="$t('as.manufacturer')" prop="manufacturer" width="280px" />
            <el-table-column :label="$t('as.dispositionSituation')" prop="dispositionSituation " width="150px" />
            <el-table-column :label="$t('as.assetOrg')" prop="assetOrg" width="150px" />
            <el-table-column :label="$t('as.shippersOrg')" prop="shippersOrg" width="150px" />
            <el-table-column :label="$t('as.remark')" prop="remark " width="350px" />
            <el-table-column :label="$t('as.differentQty')" prop="differentQty" width="150px" fixed="right">
                <template #default="scope">
                    <el-tag size="large" type="warning">{{scope.row.differentQty}}</el-tag>
				</template>
            </el-table-column>
            <el-table-column :label="$t('as.stockDifferentQty')" prop="stockDifferentQty" width="150px" fixed="right">
                <template #default="scope">
                    <el-tag size="large" type="danger">{{scope.row.stockDifferentQty}}</el-tag>
				</template>
            </el-table-column>
        </el-table>
        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    </div>
</template>


<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { getAssetCardCheckStockDetailList } from '/@/api/platform/wms/assetCardCheckStock';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: { },
	pageList: getAssetCardCheckStockDetailList,
});

// 刷新表格
const refresh = (row: any) => {
    state.queryForm.HeaderId = row
    getDataList()
}

// 暴露变量
defineExpose({
    refresh
});

const { sizeChangeHandle, currentChangeHandle,getDataList,tableStyle } = useTable(state);
</script>